<template>
   <ul class="func-list">
        <li class="func-list-item" :class="[{'line': item.parentId === '0' }]"   v-for="item in list" :key="item.moduleKey">
            <FuncListTitle :detail="item" @change-item="changeItem" v-if="item.visible === 1">
                <template v-if="item.moduleRuleList">
                    <FuncListOption :detail="item" @change-item="changeItem">
                    </FuncListOption>
                </template>
            </FuncListTitle>
            <div class="error-tip" v-if="props.validateTips[item.moduleKey]">{{item.moduleName || '当前项'}}为必填项</div>
            <func-list-item v-if="item.children" :validate-tips="props.validateTips"
                    :list="item.children" @change-item="changeItem" ></func-list-item>
        </li>
    </ul>
</template>
<script setup>
import FuncListTitle from './func-list-title.vue';
import FuncListOption from './func-list-option.vue';
import { defineProps, onMounted, defineEmits } from 'vue'

const emit = defineEmits(['change-item']);

const props = defineProps({
    list: {
        type: Array,
        default: () => {
            return []
        }
    },
    isDisabled: {// 是否禁止选择
        type: Boolean,
        default: false
    },
    validateTips: { // 错误提示
        type: Object,
        default: () => {
            return {}
        }
    }
});

// ruleCheck
function changeItem (module) {
    emit('change-item', module);
}


onMounted(() => {

 })


</script>

<style lang="scss" scoped>
.func-list {
    list-style: none;
    .func-list-item {
        margin-top: 10px;
        .title {
            font-size: 14px;
            font-weight: bold;
            color: #333333;
            margin-right: 8px;
        }
    }
}
.flex {
    display: flex;
    align-items: center;
}
.line {
    border-bottom: 1px solid #dddddd;
    padding: 20px 0px;
    &:last-child {
        border-bottom: none;
    }
}
.error-tip {
    font-size: 12px;
    color: var(--el-color-danger);
    margin-left: 14px;
}


</style>